import React,{Component} from "react";
import {Link, withRouter} from "react-router-dom";
import {Steps, Tabs, Icon, Button, message } from "antd";
import ajax from "../ajaxMethod";

import moment from 'moment';

var interval = null
var minute = 10;
var allTime = minute * 60000;//10分钟

class BookT extends Component{
    constructor(props){
        super(props);
        this.state={
            ...this.props.location.values?(()=>{
                localStorage.setItem("valuesS", JSON.stringify(this.props.location.values));
                return this.props.location.values;
            })(): JSON.parse(localStorage.getItem("valuesS")),
            restTime: 0,
        }
    }
    componentDidMount(){
        this.setRest();
        scrollTo(0,0);
        interval = setInterval(this.freshTime, 1000);
    }
    componentWillUnmount(){//如果离开这一页但是时间还没超时，就发送取消锁定请求。
        let now = new Date(), 
            begain = new Date(this.state.submiteTime), 
            restTime = begain.getTime() + allTime - now.getTime(),
            _this = this;

        if(restTime >= 0){
        }else{//超时取消订单
            ajax.postAjax("/interface/bookTimeout", this.state.data, res=>{
                if(res.success){
                }else{
                    console.error(res.description);
                }
            }, err=>{
                console.error(err);
            })
            _this.setState({restTime: 0});
            clearInterval(interval);
            return ;
        }
    }
    setRest = () =>{//设定初始的时候为n分钟倒计时开始
        let now = new Date(), 
            begain = new Date(this.state.submiteTime);

        this.setState({restTime: begain.getTime() + allTime - now.getTime()});
    }
    freshTime = () =>{
        let now = new Date(), 
            begain = new Date(this.state.submiteTime), 
            restTime = begain.getTime() + allTime - now.getTime(),
            _this = this;

        if(restTime >= 0){
            this.setState({restTime: begain.getTime() + allTime - now.getTime()})
        }else{//超时取消订单
            ajax.postAjax("/interface/bookTimeout", this.state.data, res=>{
                if(res.success){
                }else{
                    console.error(res.description);
                }
            }, err=>{
                console.error(err);
            })
            _this.setState({restTime: 0});
            clearInterval(interval);
            return ;
        }
    }
    canclePay = () =>{
        let _this = this;

        clearInterval(interval);
        ajax.postAjax("/interface/bookTimeout", this.state.data, res=>{
            if(res.success){
                message.success("取消订单成功");
                _this.props.history.replace({pathname:"/"});
            }else{
                console.error(res.description);
            }
        }, err=>{
            console.error(err);
        })
    }
    nextPage = (e) =>{
        //到下一页应该不允许再返回
        let _this = this, 
            value = {
                goID: this.state.data.goData._id
            };
        clearInterval(interval);
        //先将订单状态改变为已经支付
        if(this.state.data.toID){
            value.toID = this.state.data.toData._id;
        }
        console.log("支付d ", value);
        ajax.postAjax("/interface/bookPay", value, res=>{
            if(res.success){
                _this.props.history.replace({ pathname:"/bookFourth" , values:{...this.state} });
            }else{
                console.error(res.description);
                message.error(res.description);
            }
        })
    }
    render(){
        const initalValues = this.state.initalValues;
        const values = this.state.values;
        let typeobj = {},
            toTypeobj ={},
            sumPay = 0,
            sumConstruction = 0,
            sumFule = 0,
            sumGoTrip = 0,//去程总的钱
            sumToTrip = 0,//返程总的钱
            type="",
            toType="",
            typeValue = "",
            toTypeValue = "";
        console.log("this.state-book-t", this.state);
        switch(initalValues.goType){
            case "0":{
                typeValue="经济舱";
                type = "economyClass";
            };break;
            case "1":{
                typeValue="商务舱";
                type = "businessClass";
            };break;
            case "2":{
                typeValue="头等舱";
                type = "firstClass";
            };break;
            default:
        }
        typeobj =  initalValues.goTrip[type];
        for(let i = 0; i <  values.passenger.length; i++){
            sumPay += values.passenger[i].pay;
            sumConstruction += values.passenger[i].construction;
            sumFule += values.passenger[i].fuel;
        }
        sumGoTrip = sumPay * typeobj.afterPrice + sumConstruction * typeobj.construction + sumFule * typeobj.fuel;
        console.log("sumGoTrip", sumGoTrip, typeobj, sumPay, sumConstruction, sumFule);
        if(Object.keys(initalValues.toTrip).length){
            switch(initalValues.toType){
                case "0":{
                    toTypeValue="经济舱";
                    toType = "economyClass";
                };break;
                case "1":{
                    toTypeValue="商务舱";
                    toType = "businessClass";
                };break;
                case "2":{
                    toTypeValue="头等舱";
                    toType = "firstClass";
                };break;
                default:
            }
            toTypeobj =  initalValues.toTrip[toType];
            sumToTrip = sumPay * toTypeobj.afterPrice + sumConstruction * toTypeobj.construction + sumFule * toTypeobj.fuel;
        }
        return (
        <div id="book">
            <div className="top">
                <div>
                    <div><Link to="/"><i className="logo"></i></Link></div>
                    <div className="step">
                        <Steps current={2} size="small">
                            <Steps.Step title="乘机信息" description="" />
                            <Steps.Step title="确认信息" description="" />
                            <Steps.Step title="支付" description="" />
                            <Steps.Step title="完成" description="" />
                        </Steps>
                    </div>
                </div>
            </div>
            <div className="content">
                <div className="left">
                    <div className="tips">
                        <p><i>i</i><span>在{minute}分钟之内完成支付即可完成订单，超时将自动取消订单</span></p>
                    </div>
                    {
                        this.state.restTime > 0?<div className="pay-box">
                        <h2>支付方式</h2>
                        <Tabs className="pay-tabs" defaultActiveKey="1" >
                            <Tabs.TabPane tab={<span>支付宝</span>} key="1">
                                <div className="table-content">
                                    <div className="tb-left">
                                        <p className="receipt">收款方:<span>{initalValues.goTrip.flight.company}</span></p>
                                        <p className="price">支付金额:<span>{Object.keys(initalValues.toTrip).length?(sumGoTrip + sumToTrip).toFixed(2):(sumGoTrip).toFixed(2)}</span></p>
                                        <div><img src={require("../assets/images/alipay_code.jpg")}></img></div>
                                        <p className="time">剩余时间：<span>{(()=>{
                                            let t = this.state.restTime,
                                                m = 0,
                                                s = 0;
                                                m = parseInt(t / 60000);
                                                s = parseInt(t % 60000 / 1000);
                                            return m + "分" + s + "秒";
                                        })()}</span></p>
                                    </div>
                                    <div className="tb-right">
                                        <img src={require("../assets/images/alipay.png")}></img>
                                        <p>请打开手机支付宝的“扫一扫”，扫描二维码支付</p>
                                        <Button onClick={this.canclePay} style={{marginRight:"20px"}}>取消支付</Button>
                                        <Button onClick={this.nextPage}>完成支付</Button>
                                    </div>
                                </div>
                            </Tabs.TabPane>
                            <Tabs.TabPane tab={<span>微信</span>} key="2">
                                <div className="table-content">
                                    <div className="tb-left">
                                        <p className="receipt">收款方:<span>{initalValues.goTrip.flight.company}</span></p>
                                        <p className="price">支付金额:<span>{Object.keys(initalValues.toTrip).length?(sumGoTrip + sumToTrip).toFixed(2):(sumGoTrip).toFixed(2)}</span></p>
                                        <div><img src={require("../assets/images/weixin_code.png")}></img></div>
                                        <p className="time">剩余时间<span>{(()=>{
                                            let t = this.state.restTime,
                                                m = 0,
                                                s = 0;
                                                m = parseInt(t / 60000);
                                                s = parseInt(t % 60000 / 1000);
                                            return m + "分" + s + "秒";
                                        })()}</span></p>
                                    </div>
                                    <div className="tb-right">
                                        <img src={require("../assets/images/wechat.png")}></img>
                                        <p>请打开手机微信的“扫一扫”，扫描二维码支付</p>
                                    </div>
                                </div>
                            </Tabs.TabPane>
                            <Tabs.TabPane tab={<span>其他</span>} key="3">
                                <div className="table-content">暂时未开通，敬请期待</div>
                            </Tabs.TabPane>
                        </Tabs>
                    </div>:
                    <div className="pay-box-timeout">
                        <p>订单超时已取消，请重新预定</p>
                    </div>
                    }
                </div>
                <div className="right">
                    <div className="go-trip all-trip">
                        <div className="where">
                            <span className="trip">去</span>
                            <span>{moment(initalValues.goTrip.start.time).format("MM-DD")}</span>
                            <span>周{(()=>{
                                let week = "一";
                                switch(moment(initalValues.goTrip.start.time).format("E")){
                                    case "2":week = "二"; break;
                                    case "3":week = "三"; break;
                                    case "4":week = "四"; break;
                                    case "5":week = "五"; break;
                                    case "6":week = "六"; break;
                                    case "7":week = "日"; break;
                                    default:;
                                }
                                return week;
                            })()}</span>
                            <span>{initalValues.goTrip.start.city}</span>
                            <span>-</span>
                            <span>{initalValues.goTrip.end.city}</span>
                        </div>
                        <div className="plain">
                            <span>{initalValues.goTrip.flight.company}</span>
                            <span>
                                {(()=>{
                                    let type = "小型";
                                    switch(initalValues.goTrip.flight.type){
                                        case 1:type = "中型";break;
                                        case 2:type = "大型";break;
                                        case 3:type = "巨型";break;
                                    }
                                    return initalValues.goTrip.flight.plane + "(" + type + "机)";
                                })()}
                            </span>
                            <span>{typeValue}</span>
                        </div>
                        {
                            (()=>{
                                let time = (moment(initalValues.goTrip.end.time).valueOf() - moment(initalValues.goTrip.start.time).valueOf())/1000;//秒
                                return <div className="when">
                                    <span>{moment(new Date(initalValues.goTrip.start.time)).format("HH:mm")}</span>
                                    <span className="over-time">{Math.floor(time / 3600)}h{parseInt(time % 3600 / 60)}m</span>
                                    <span>{moment(new Date(initalValues.goTrip.end.time)).format("HH:mm")}</span>
                                </div>
                            })()
                        }
                        <div className="location">
                            <span>{initalValues.goTrip.start.airport}</span>
                            <span>--------</span>
                            <span>{initalValues.goTrip.end.airport}</span>
                        </div>
                    </div>
                    {
                        (()=>{
                            // 返回的路程
                            if(Object.keys(initalValues.toTrip).length){
                                return <div div className="to-trip all-trip">
                                    <div className="where">
                                        <span className="trip">返</span>
                                        <span>{moment(initalValues.toTrip.start.time).format("MM-DD")}</span>
                                        <span>周{(()=>{
                                            let week = "一";
                                            switch(moment(initalValues.toTrip.start.time).format("E")){
                                                case "2":week = "二"; break;
                                                case "3":week = "三"; break;
                                                case "4":week = "四"; break;
                                                case "5":week = "五"; break;
                                                case "6":week = "六"; break;
                                                case "7":week = "日"; break;
                                                default:;
                                            }
                                            return week;
                                        })()}</span>
                                        <span>{initalValues.toTrip.start.city}</span>
                                        <span>-</span>
                                        <span>{initalValues.toTrip.end.city}</span>
                                    </div>
                                    <div className="plain">
                                        <span>{initalValues.toTrip.flight.company}</span>
                                        <span>
                                            {(()=>{
                                                let type = "小型";
                                                switch(initalValues.toTrip.flight.type){
                                                    case 1:type = "中型";break;
                                                    case 2:type = "大型";break;
                                                    case 3:type = "巨型";break;
                                                }
                                                return initalValues.toTrip.flight.plane + "(" + type + "机)";
                                            })()}
                                        </span>
                                        <span>{toTypeValue}</span>
                                    </div>
                                    {
                                        (()=>{
                                            let time = (moment(initalValues.toTrip.end.time).valueOf() - moment(initalValues.toTrip.start.time).valueOf())/1000;//秒
                                            return <div className="when">
                                                <span>{moment(new Date(initalValues.toTrip.start.time)).format("HH:mm")}</span>
                                                <span className="over-time">{Math.floor(time / 3600)}h{parseInt(time % 3600 / 60)}m</span>
                                                <span>{moment(new Date(initalValues.toTrip.end.time)).format("HH:mm")}</span>
                                            </div>
                                        })()
                                    }
                                    <div className="location">
                                        <span>{initalValues.toTrip.start.airport}</span>
                                        <span>--------</span>
                                        <span>{initalValues.toTrip.end.airport}</span>
                                    </div>
                                </div>
                            }
                        })()
                    }
                    {
                        (()=>{
                            return Object.keys(initalValues.toTrip).length?
                            <div className="other-pay">
                                <div>
                                    <span className="repent">去程退改￥{initalValues.goTrip[type].repent}</span>
                                    <span className="luggage">行李额{initalValues.goTrip[type].luggage}KG</span>
                                    <sapn className="afterPrice price">￥{initalValues.goTrip[type].afterPrice}<span>x {sumPay}</span></sapn>
                                </div>
                                <div>
                                    <span className="repent">返程退改￥{initalValues.toTrip[toType].repent}</span>
                                    <span className="luggage">行李额{initalValues.toTrip[toType].luggage}KG</span>
                                    <sapn className="afterPrice price">￥{initalValues.toTrip[toType].afterPrice}<span>x {sumPay}</span></sapn>
                                </div>
                                <div>
                                    <span className="construction">机建</span>
                                    <sapn className="price">￥{initalValues.goTrip[type].construction+initalValues.toTrip[toType].construction} <span>x {sumConstruction}</span></sapn>
                                </div>
                                <div>
                                    <span className="fuel">燃油</span>
                                    <sapn className="price">￥{initalValues.goTrip[type].fuel + initalValues.goTrip[type].fuel} <span>x {sumFule}</span></sapn>
                                </div>
                            </div>:
                            <div className="other-pay">
                                <div>
                                    <span className="repent">去程退改￥{initalValues.goTrip[type].repent}</span>
                                    <span className="luggage">行李额{initalValues.goTrip[type].luggage}KG</span>
                                    <sapn className="afterPrice price">￥{initalValues.goTrip[type].afterPrice}<span>x {sumPay}</span></sapn>
                                </div>
                                <div>
                                    <span className="construction">机建</span>
                                    <sapn className="price">￥{initalValues.goTrip[type].construction} <span>x {sumConstruction}</span></sapn>
                                </div>
                                <div>
                                    <span className="fuel">燃油</span>
                                    <sapn className="price">￥{initalValues.goTrip[type].fuel} <span>x {sumFule}</span></sapn>
                                </div>
                            </div>
                        })()
                    }
                    <p><span>￥</span>{Object.keys(initalValues.toTrip).length?(sumGoTrip + sumToTrip).toFixed(2):(sumGoTrip).toFixed(2)}</p>
                </div>
            </div>
        </div>
          );
    }
  
}
export default withRouter(BookT);